import React from 'react';
import util from 'util';
import {Button, Table, Modal, Form} from 'antd';
import {SearchDemo, RightButton, ColsEdit} from 'kpl';
import sys_dict from "sys_dict";




class A301 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tblSource: [],
            searchParams: {
                rolename: "",
                roletype: "",
                descript: "",
                "page": 1,
                "rows": sys_dict.defaultPageSize.toString()
            },
            totalCount: 0,
            isLoading: false
        }
    }
    
    

    componentDidMount() {
        let params = this.state.searchParams;
        this.refresh(params);
    }

    refresh(paramdic) {
        this.setState({isLoading: true});
        paramdic.start_date = util.date2str(paramdic.start_date);
        paramdic.end_date = util.date2str(paramdic.end_date);
        util.httpRequest({
            type: "POST", url: 'content030013.json', params: paramdic, plattype: '', success: function (result) {
                if (result.ret_code == "0000") {
                    this.setState({
                        tblSource: result.feedback_list,
                        totalCount: result.counts
                    });
                }
            }.bind(this),
            complete: function () {
                this.setState({
                    isLoading: false
                })
            }.bind(this)
        });
    }

    search(params) {
        console.log(this);
        params.page = "1";
        params.rows = sys_dict.defaultPageSize.toString();
        this.setState({
            searchParams: params
        });
        this.refresh(params);
    }

    onShowSizeChange(current, pageSize) {
        console.log(current, pageSize);
        var params = this.state.searchParams;
        params.rows = pageSize;
        params.page = current;
        this.setState({searchParams: params});
        this.refresh(params);
    }

    onChange(page) {
        console.log(page);
        var params = this.state.searchParams;
        params.page = page;
        this.setState({searchParams: params});
        this.refresh(params);
    }

    config() {
        const pagination = {
            total: this.state.totalCount,
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: sys_dict.pageSizeOptions,
            defaultPageSize: sys_dict.defaultPageSize,
            onShowSizeChange: this.onShowSizeChange.bind(this),
            onChange: this.onChange.bind(this)
        };

        return {
            tableConfig: {
                pagination: pagination,
                loading: this.state.isLoading,
                dataSource: this.state.tblSource,
                columns: [
	                //{title: '反馈id',dataIndex: 'feedback_id',key: 'feedback_id'},
                    {title: '反馈人',dataIndex: 'feedback_person_name',key: 'feedback_person_name'},
                    {title: '反馈人手机号',dataIndex: 'phone',key: 'phone'},
                    {title: '反馈人手机型号',dataIndex: 'model',key: 'model'},
                    {title: '反馈手机系统版本',dataIndex: 'version',key: 'version'},
                    {title: '反馈内容',dataIndex: 'feedback_content',key: 'feedback_content'},
	                {title: '团队名称',dataIndex: 'group_name',key: 'group_name'},
	                {title: '反馈日期',dataIndex: 'feedback_date',key: 'feedback_date'},
	                {title: '反馈时间',dataIndex: 'feedback_time',key: 'feedback_time'},
	                {title: '操作',dataIndex: 'caozuo',
	                 	render: (text, data, index) => (
                        <span>
                                <span className="ant-divider"></span>
                               <span>
                                         <a onClick={this.detail.bind(this, data, index)}>详情</a>
                                </span>
                                <span className="ant-divider"></span>
                                 <a onClick={this.deleteRecord.bind(this, data, index)}>删除</a>
                        </span>
                        )
	                }
                ]
            }
        };
    }


   deleteRecord(record, type, e) {
		var me = this;
        var sContent="确认删除吗？";
        var sOkText="确认删除";
        var sCancelText="不删除";
        
        
        Modal.confirm({
        	     title:sOkText,
                content: sContent,
                okText: sOkText,
                cancelText: sCancelText,
                onOk: function () {                  
                    util.httpRequest({
                        type: "POST",
                        url: 'content030014.json',
                        plattype: '',
                        params: record,
                        success: function (result) {
                        	console.log("searchParams.release_begin_date:"+me.state.searchParams.release_begin_date);
                            me.refresh(me.state.searchParams);
                        }.bind(this)
                    });
                }
            });
		
	}
	
	


	detail(record, index) {
        let obj = Object.assign({}, record);
        this.setState({
            operateData: obj,
            modalVisible: true,
            operateType: 'DETAIL',
            modalTitle: "详情"
        }, function () {
            var {setFieldsValue} = this.refs.form.getForm();
            setFieldsValue(obj);
        });
    }
    
    	

    handleCancel() {
        this.setState({
            modalVisible: false,
            modalVisible2: false
        });
    }
   

    render() {
        let config = this.config();
        
        
        const searchConfig = {
            searchTitle: "意见反馈查询",
            searchInit: {
               
            },
            searchField: [
                [
                    {propsname: "反馈人：", propsKey: "feedback_person_name", propsType: "input", key: "1"},
                    {propsname: "团队名称：", propsKey: "group_name", propsType: "input", key: "2"},
                    {propsname: "开始时间：", propsKey: "begin_date", propsType: "datepicker", key: "3"},
                    {propsname: "截止时间：", propsKey: "end_date", propsType: "datepicker", key: "4"}
                ]
            ]
        };
        
        	const detailConfig = {
            operateTitle: "详情",
            operateType: this.state.operateType,
            operateData: this.state.operateData,
            operateInit: {rolename: "", roletype: "", descript: ""},
            operateColSm: 12,
            operateCol: {labelCol: 10, wrapperCol: 14},
            operateField: [
                [
                    {
                        propsname: "反馈用户",
                        propsKey: "feedback_person_name",
                        propsType: "input",
                        key: "1",
                        rules: [{required: true, min: 0, message: '请输入'}]
                    },
                     {
                        propsname: "手机系统",
                        propsKey: "app_version",
                        propsType: "input",
                        key: "4",
                        rules: [{required: true, whitespace: true, min: 0, message: '请输入'}],
                        labelCol: 5,
                        wrapperCol: 19
                    }
                ],
                [
                	 {
                        propsname: "所属团队",
                        propsKey: "group_name",
                        propsType: "input",
                        key: "2",
                        rules: [{required: true, min: 0, message: '请输入'}]
                    } ,
                    {
                        propsname: "系统版本",
                        propsKey: "version",
                        propsType: "input",
                        key: "5",
                        rules: [{required: true, whitespace: true, min: 0, message: '请输入'}],
                        labelCol: 5,
                        wrapperCol: 19
                    }
                ],
                [
                    {
                        propsname: "联系方式",
                        propsKey: "phone",
                        propsType: "input",
                        key: "3",
                        rules: [{required: true, min: 0, message: '请输入'}]
                    }
                  ,
                    {
                        propsname: "设备",
                        propsKey: "model",
                        propsType: "input",
                        key: "6",
                        rules: [{required: true, whitespace: true, min: 0, message: '请输入'}],
                        labelCol: 5,
                        wrapperCol: 19
                    }
                ],
                [
                    {
                        propsname: "反馈内容",
                        propsKey: "feedback_content",
                        propsType: "textarea",
                        key: "7",
                        rules: [{required: true, whitespace: true, min: 0, message: '请输入'}],
                        labelCol: 5,
                        wrapperCol: 19
                    }
                ]
            ]
        };

        return (
            <div>
                <SearchDemo search={this.search.bind(this)} searchConfig={searchConfig}></SearchDemo>
                <Table {...config.tableConfig}></Table>
                <Modal visible={this.state.modalVisible} title={this.state.modalTitle} width="50%"
                       closable={false} footer={[
                    <Button key="back" type="ghost" size="large" onClick={this.handleCancel.bind(this)}>取消</Button>,

                ]}>
                    <ColsEdit ref="form" key="create" config={detailConfig}></ColsEdit>
                </Modal>
                
            </div>
        );
    }
}

export default A301;